<template>
  <a-modal
    :title="formTile + '添加校服校标'"
    :visible="true"
    width="50%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card>
        <a-row
          type="flex"
          justify="start"
          align="top"
        >
          <a-col :span="24">
            <a-form
              :form="form"
              @submit="handleSubmit"
              :labelCol="formItemLayout.labelCol"
              :wrapperCol="formItemLayout.wrapperCol"
            >
              <a-form-item
                label="序号"
                :required="true"
              >
                <a-input
                  allow-clear
                  placeholder="请输入序号"
                  :maxLength="40"
                  v-decorator="[
                  `seq`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入序号'
                      }
                    ]
                  }
                ]"
                />
              </a-form-item>
                <a-form-item
                label="销售色"
                :required="true"
              >
                <a-input
                  allow-clear
                  placeholder="请输入销售色"
                  :maxLength="40"
                  v-decorator="[
                  `styColorId`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入销售色'
                      }
                    ]
                  }
                ]"
                />
              </a-form-item>
              <a-form-item
                label="描述"
                :required="true"
              >
                <a-textarea
                  allow-clear
                  placeholder="请输入描述"
                  :maxLength="40"
                  v-decorator="[
                  `description`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入描述'
                      }
                    ]
                  }
                ]"
                >
                </a-textarea>
              </a-form-item>
              <a-form-item
                label="图片"
                :required="true"
              >
                 <!-- <JImageUpload
                    style="display:flex;flex-wrap: wrap;width:100%"
                    :fileSize="5"
                    :uploadParams="getUploadParams()"
                    :accept="'image/*'"
                    @fileChange="fileXcxImageChange"
                    v-model="fileList"
                  ></JImageUpload> -->
                  <a-upload name="file" list-type="picture-card" :multiple="true" class="avatar-uploader"
                    :data="{ type: 1 }" :fileList="fileList" @change="handleChange" :action="uploadUrl">
                    <div>
                      <a-icon type="plus" />
                      <div class="ant-upload-text">
                        上传图片
                      </div>
                    </div>
                  </a-upload>
              </a-form-item>
              <a-row>
                <a-col
                  :span="16"
                  :offset="8"
                  class="info-action"
                >
                  <a-button
                    type="primary"
                    @click="reset"
                  >返回</a-button>
                  <a-button
                    type="primary"
                    class="ml-20"
                    html-type="submit"
                    :loading="loading"
                  >保存</a-button>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
    </div>

  </a-modal>
</template>

<script>
import { saveSchool,updateSchool } from '@api/rd/index'
import globalData from '@/assets/js/common'
import { uploadUrl } from '@api/rd/index.js'
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
export default {
  components: { JImageUpload },

  props: {
    schoolDetail: {
      type: Object,
      default: null
    },
     billId: {
      type: Number,
      default: null
    }
  },

  data() {
    return {
      id: '',
      uploadUrl,
      loading: false,
      ifEdit: false,
      craftBillSpec:{},
      fileList: [],
      imageUrl: '',
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xl: { span: 10 },
          xs: { span: 16 },
          sm: { span: 16 }
        }
      }
    }
  },
  created() {
    const { schoolDetail } = this.$props
    if (schoolDetail) {
      this.formTile = '编辑'
      this.ifEdit = true
      if (schoolDetail.imgurl) {
        const obj = {
          name: 'pic.png',
          uid: schoolDetail.imgurl,
          status: 'done',
          url: schoolDetail.imgurl
        }
        this.fileList.push(obj)
      }
    } else {
      this.formTile = '新增'
    }
  },
   computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  methods: {
    reset() {
      this.form.resetFields()
      this.$emit('closeSchool')
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    fileXcxImageChange(list) {
      this.imgurl = list[0].url
    },
    handleChange(info, item, index) {
      let fileList = [...info.fileList]
      this.fileList = [...fileList]
      if (info.file.status === 'uploading') {
        return
      }
      if (info.file.status === 'done') {
        let list = fileList.map(file => {
          if (file.response) {
            file.url = file.response.data.url
          }
          return file
        })
        this.fileList = list.slice(-1)
      }
      if (info.file.response.code != '200') {
        this.$message.error(info.file.response.msg)
        info.file.status = 'error'
        this.fileList.map((item) => {
          if (item.thumbUrl == info.file.thumbUrl) {
            item.status = 'error'
          }
        })
      }
    },
    async submit(values) {
      this.loading = true
      var params = values
      params.billId = this.billId
      const { realname } = this.userInfo
      params.operator = realname
      params.imgurl = this.fileList[0].url
      var paramsArr = []
      paramsArr.push(params)
      try {
        const res = this.ifEdit ? await updateSchool('bill', params) : await saveSchool('bill', paramsArr)
        if (res.code == 200) {
          this.$message.success(this.idEdit ? '修改校服校标成功！' : '新建校服校标成功！')
          this.reset()
        } else {
          this.$message.warning(res.msg)
        }
      } catch (error) {
        this.$message.warning('操作失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
</style>
